<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>出题系统</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/xlsx@0.18.5/dist/xlsx.full.min.js"></script>
    <style>

        .question-item {
            cursor: pointer;
            padding: 8px;
            border-bottom: 1px solid #eee;
        }
        .question-item:hover {
            background-color: #f8f9fa;
        }
        .question-item.active {
            background-color: #e9ecef;
        }
        #question-container {
            min-height: 300px;
            border: 1px solid #dee2e6;
            border-radius: 5px;
            padding: 20px;
        }
        .hidden {
            display: none;
        }
        .question-type-badge {
            font-size: 0.75rem;
            margin-left: 8px;
        }
        #answer-textarea {
            min-height: 100px;
        }
        .option-label {
            display: block;
            margin-bottom: 5px;
        }
        /* 导航按钮样式 */
#prevBtn, #nextBtn {
    min-width: 80px;
}
    </style>
</head>
<body>
    <div class="container mt-4">
        <h2 class="mb-4">出题系统</h2>
        
        <!-- 文件上传区域 -->
        <div class="card mb-4">
            <div class="card-header bg-primary text-white">
                <h5>上传试题Excel文件</h5>
            </div>
            <div class="card-body">
                <div class="mb-3">
                    <label for="excelFile" class="form-label">选择Excel文件：</label>
                    <input class="form-control" type="file" id="excelFile" accept=".xlsx, .xls">
                </div>
                <button id="parseBtn" class="btn btn-primary">解析文件</button>
                <div class="mt-2">
                    <small class="text-muted">
                        Excel格式要求：<br>
                        - 第一列: 问题文本<br>
                        - 第二列: 题型（"choice"选择题/"answer"简答题）<br>
                        - 选择题: 后续列为选项，最后一列为正确答案<br>
                        - 简答题: 第三列为参考答案
                    </small>
                </div>
            </div>
        </div>
        
        <div class="row">
            <!-- 题目列表 -->
            <div class="col-md-4">
                <div class="card">
                    <div class="card-header bg-secondary text-white">
                        <div class="d-flex justify-content-between align-items-center">
                            <span>题目列表</span>
                            <button id="randomBtn" class="btn btn-sm btn-light">随机一题</button>
                        </div>
                    </div>
                    <div class="card-body p-0">
                        <div id="questions-list" style="max-height: 500px; overflow-y: auto;"></div>
                    </div>
                </div>
            </div>
            
            <!-- 题目展示与答题区域 -->
            <div class="col-md-8">
                <div class="card">
                    <div class="card-header bg-info text-white d-flex justify-content-between align-items-center">
                        <h5 id="current-question-title">题目</h5>
                        <span id="question-type-badge" class="badge bg-light text-dark question-type-badge"></span>
                    </div>
                    <div class="card-body">
                        <div id="question-container" class="mb-3">
                            <p class="text-muted">请从左侧选择题目或上传Excel文件</p>
                        </div>
                        
                        <!-- 选择题答题区域 -->
                        <div id="choice-answer-section" class="hidden">
                            <h6>请选择答案：</h6>
                            <div id="choice-options" class="mb-3"></div>
                        </div>
                        
                        <!-- 简答题答题区域 -->
                        <div id="text-answer-section" class="hidden">
                            <h6>请输入你的答案：</h6>
                            <textarea id="answer-textarea" class="form-control mb-3"></textarea>
                        </div>
                        
    <div>
        <button id="prevBtn" class="btn btn-outline-secondary me-2">上一题</button>
        <button id="nextBtn" class="btn btn-outline-secondary">下一题</button>
    </div>
    <div>
        <button id="showAnswerBtn" class="btn btn-outline-success me-2">查看答案</button>
        <button id="submitBtn" class="btn btn-primary">提交答案</button>
    </div>
                        
                        <!-- 用户答案显示 -->
                        <div id="user-answer-display" class="mt-3 p-3 bg-light rounded hidden">
                            <h6>你的答案：</h6>
                            <div id="user-answer-content"></div>
                        </div>
                        
                        <!-- 正确答案显示 -->
                        <div id="correct-answer" class="alert alert-success mt-3 hidden">
                            <h6>参考答案：</h6>
                            <div id="correct-answer-content"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- 下载按钮 -->
        <div class="mt-3 text-end hidden" id="download-section">
            <button id="downloadBtn" class="btn btn-success">下载带答案的Excel</button>
        </div>
    </div>

    <script>
        // 全局变量
        let questions = [];
        let currentQuestionIndex = -1;
        let userAnswers = {};
        let workbook = null;
        let worksheet = null;
        
        // DOM元素
        const prevBtn = document.getElementById('prevBtn');
const nextBtn = document.getElementById('nextBtn');


        const questionsList = document.getElementById('questions-list');
        const questionContainer = document.getElementById('question-container');
        const choiceAnswerSection = document.getElementById('choice-answer-section');
        const textAnswerSection = document.getElementById('text-answer-section');
        const choiceOptionsDiv = document.getElementById('choice-options');
        const answerTextarea = document.getElementById('answer-textarea');
        const correctAnswerDiv = document.getElementById('correct-answer');
        const correctAnswerContent = document.getElementById('correct-answer-content');
        const currentQuestionTitle = document.getElementById('current-question-title');
        const questionTypeBadge = document.getElementById('question-type-badge');
        const userAnswerDisplay = document.getElementById('user-answer-display');
        const userAnswerContent = document.getElementById('user-answer-content');
        const parseBtn = document.getElementById('parseBtn');
        const randomBtn = document.getElementById('randomBtn');
        const showAnswerBtn = document.getElementById('showAnswerBtn');
        const submitBtn = document.getElementById('submitBtn');
        const downloadBtn = document.getElementById('downloadBtn');
        const downloadSection = document.getElementById('download-section');
        const excelFileInput = document.getElementById('excelFile');
        
        // 事件监听
        prevBtn.addEventListener('click', showPreviousQuestion);
nextBtn.addEventListener('click', showNextQuestion);


        parseBtn.addEventListener('click', parseExcelFile);
        randomBtn.addEventListener('click', showRandomQuestion);
        showAnswerBtn.addEventListener('click', showCorrectAnswer);
        submitBtn.addEventListener('click', submitAnswer);
        downloadBtn.addEventListener('click', downloadExcelWithAnswers);

        // 显示上一题
function showPreviousQuestion() {
    if (currentQuestionIndex <= 0) {
        alert('已经是第一题了');
        return;
    }
    showQuestion(currentQuestionIndex - 1);
}

// 显示下一题
function showNextQuestion() {
    if (currentQuestionIndex >= questions.length - 1) {
        alert('已经是最后一题了');
        return;
    }
    showQuestion(currentQuestionIndex + 1);
}
        
        // 解析Excel文件
        function parseExcelFile() {
            const file = excelFileInput.files[0];
            if (!file) {
                alert('请先选择Excel文件');
                return;
            }
            
            const reader = new FileReader();
            reader.onload = function(e) {
                const data = new Uint8Array(e.target.result);
                workbook = XLSX.read(data, { type: 'array' });
                
                // 获取第一个工作表
                const firstSheetName = workbook.SheetNames[0];
                worksheet = workbook.Sheets[firstSheetName];
                
                // 转换为JSON
                const jsonData = XLSX.utils.sheet_to_json(worksheet, { header: 1 });
                
                // 处理数据
                questions = jsonData.filter(row => row.length >= 3).map((row, index) => {
                    const question = {
                        id: index,
                        text: row[0],
                        type: row[1] || 'answer', // 默认为简答题
                        userAnswer: null,
                        isAnswered: false
                    };
                    
                    if (question.type === 'choice') {
                        // 选择题
                        question.options = row.slice(2, -1);
                        question.answer = row[row.length - 1];
                    } else {
                        // 简答题
                        question.answer = row[2];
                    }
                    
                    return question;
                });
                
                if (questions.length === 0) {
                    alert('Excel文件中没有找到有效的题目数据');
                    return;
                }
                
                // 初始化用户答案
                userAnswers = {};
                
                // 渲染题目列表
                renderQuestionsList();
                
                // 显示第一个题目
                if (questions.length > 0) {
                    showQuestion(0);
                }
                
                // 显示下载按钮
                downloadSection.classList.remove('hidden');
                
                alert(`成功解析 ${questions.length} 道题目（${questions.filter(q => q.type === 'choice').length}道选择题，${questions.filter(q => q.type === 'answer').length}道简答题）`);
            };
            
            reader.readAsArrayBuffer(file);
        }
        
        // 渲染题目列表
        function renderQuestionsList() {
            questionsList.innerHTML = '';
            
            questions.forEach((question, index) => {
                const questionItem = document.createElement('div');
                questionItem.className = 'question-item';
                
                // 题目文本（截短显示）
                const shortText = question.text.length > 30 
                    ? question.text.substring(0, 30) + '...' 
                    : question.text;
                
                questionItem.innerHTML = `
                    ${index + 1}. ${shortText}
                    <span class="badge ${question.type === 'choice' ? 'bg-info' : 'bg-warning'} question-type-badge">
                        ${question.type === 'choice' ? '选择题' : '简答题'}
                    </span>
                `;
                
                questionItem.dataset.index = index;
                
                // 标记已回答的题目
                if (question.isAnswered) {
                    questionItem.style.fontWeight = 'bold';
                    questionItem.style.color = '#28a745';
                }
                
                questionItem.addEventListener('click', () => {
                    showQuestion(index);
                });
                
                questionsList.appendChild(questionItem);
            });
        }
        
        // 显示指定题目
        function showQuestion(index) {
            // 更新导航按钮状态
    prevBtn.disabled = index <= 0;
    nextBtn.disabled = index >= questions.length - 1;
            // 更新当前题目索引
            currentQuestionIndex = index;
            
            // 更新列表中的活动项
            const allItems = document.querySelectorAll('.question-item');
            allItems.forEach(item => {
                item.classList.remove('active');
                if (parseInt(item.dataset.index) === index) {
                    item.classList.add('active');
                }
            });
            
            // 获取当前题目
            const question = questions[index];
            currentQuestionTitle.textContent = `题目 ${index + 1}/${questions.length}`;
            
            // 更新题型标识
            questionTypeBadge.textContent = question.type === 'choice' ? '选择题' : '简答题';
            questionTypeBadge.className = `badge ${question.type === 'choice' ? 'bg-info' : 'bg-warning'} question-type-badge`;
            
            // 渲染题目
            questionContainer.innerHTML = `<h5>${question.text}</h5>`;
            
            // 根据题型显示不同的答题区域
            if (question.type === 'choice') {
                // 选择题
                choiceAnswerSection.classList.remove('hidden');
                textAnswerSection.classList.add('hidden');
                
                // 渲染选项
                let optionsHtml = '';
                question.options.forEach((option, i) => {
                    optionsHtml += `
                        <div class="form-check">
                            <input class="form-check-input" type="radio" name="answer" id="option-${i}" value="${option}">
                            <label class="form-check-label option-label" for="option-${i}">
                                ${String.fromCharCode(65 + i)}. ${option}
                            </label>
                        </div>
                    `;
                });
                
                choiceOptionsDiv.innerHTML = optionsHtml;
                
                // 恢复已选择的答案
                if (question.userAnswer !== null) {
                    const options = choiceOptionsDiv.querySelectorAll('input[type="radio"]');
                    options.forEach(option => {
                        if (option.value === question.userAnswer) {
                            option.checked = true;
                        }
                    });
                }
            } else {
                // 简答题
                choiceAnswerSection.classList.add('hidden');
                textAnswerSection.classList.remove('hidden');
                
                // 恢复已输入的答案
                answerTextarea.value = question.userAnswer || '';
            }
            
            // 显示用户答案
            updateUserAnswerDisplay();
            
            // 隐藏参考答案
            correctAnswerDiv.classList.add('hidden');
        }
        
        // 更新用户答案显示
        function updateUserAnswerDisplay() {
            const question = questions[currentQuestionIndex];
            
            if (question.userAnswer !== null) {
                userAnswerDisplay.classList.remove('hidden');
                userAnswerContent.innerHTML = question.type === 'choice' 
                    ? `<strong>选项：</strong> ${question.userAnswer}`
                    : question.userAnswer;
            } else {
                userAnswerDisplay.classList.add('hidden');
            }
        }
        
        // 显示随机题目
        function showRandomQuestion() {
            if (questions.length === 0) return;
            
            let randomIndex;
            do {
                randomIndex = Math.floor(Math.random() * questions.length);
            } while (randomIndex === currentQuestionIndex && questions.length > 1);
            
            showQuestion(randomIndex);
        }
        
        // 显示正确答案
        function showCorrectAnswer() {
            if (currentQuestionIndex === -1) return;
            
            const question = questions[currentQuestionIndex];
            
            if (question.type === 'choice') {
                correctAnswerContent.innerHTML = `
                    <strong>正确答案：</strong> ${question.answer}<br>
                    ${question.options.includes(question.answer) 
                        ? `(${String.fromCharCode(65 + question.options.indexOf(question.answer))})` 
                        : ''}
                `;
            } else {
                correctAnswerContent.innerHTML = question.answer;
            }
            
            correctAnswerDiv.classList.remove('hidden');
        }
        
        // 提交答案
        function submitAnswer() {
            if (currentQuestionIndex === -1) return;
            
            const question = questions[currentQuestionIndex];
            let answer = null;
            
            if (question.type === 'choice') {
                // 选择题
                const selectedOption = choiceOptionsDiv.querySelector('input[name="answer"]:checked');
                if (!selectedOption) {
                    alert('请先选择一个答案');
                    return;
                }
                answer = selectedOption.value;
            } else {
                // 简答题
                answer = answerTextarea.value.trim();
                if (!answer) {
                    alert('请输入你的答案');
                    return;
                }
            }
            
            // 保存用户答案
            question.userAnswer = answer;
            question.isAnswered = true;
            userAnswers[currentQuestionIndex] = answer;
            
            // 更新显示
            updateUserAnswerDisplay();
            
            // 更新题目列表显示
            renderQuestionsList();
            
            alert('答案已保存');
        }
        
        // 下载带答案的Excel
        function downloadExcelWithAnswers() {
            if (!workbook || !worksheet) {
                alert('请先上传并解析Excel文件');
                return;
            }
            
            // 获取原始数据
            const jsonData = XLSX.utils.sheet_to_json(worksheet, { header: 1 });
            
            // 添加用户答案列
            const newData = jsonData.map((row, index) => {
                if (index >= questions.length || row.length === 0) return row;
                
                // 创建新行（避免修改原行）
                const newRow = [...row];
                
                // 确保有足够的列
                while (newRow.length < 3) newRow.push('');
                
                // 添加用户答案列
                if (questions[index].isAnswered) {
                    // 如果已经有用户答案列（第4列），更新它
                    if (newRow.length > 3) {
                        newRow[3] = questions[index].userAnswer || '';
                    } else {
                        // 否则添加用户答案列
                        newRow.push(questions[index].userAnswer || '');
                    }
                } else if (newRow.length <= 3) {
                    // 没有答案但需要保持列数一致
                    newRow.push('');
                } else {
                    newRow[3] = '';
                }
                
                return newRow;
            });
            
            // 更新工作表
            const newWorksheet = XLSX.utils.aoa_to_sheet(newData);
            workbook.Sheets[workbook.SheetNames[0]] = newWorksheet;
            
            // 生成Excel文件
            const excelBuffer = XLSX.write(workbook, { bookType: 'xlsx', type: 'array' });
            
            // 创建下载链接
            const blob = new Blob([excelBuffer], { type: 'application/octet-stream' });
            const url = URL.createObjectURL(blob);
            const a = document.createElement('a');
            a.href = url;
            a.download = '带答案的试题.xlsx';
            document.body.appendChild(a);
            a.click();
            document.body.removeChild(a);
            URL.revokeObjectURL(url);
        }
    </script>
</body>
</html>